<template>
  <div class="col-3">
    <div class="text-right">
      <el-button type="primary" @click="create1">创建团队</el-button>

    </div>
    <el-dialog :title="title" @closed="closed" v-model="dialogVisible">
      <el-form :model="formdata" label-width="100px">
        <el-form-item label="团队名称" prop="name">
          <el-input v-model="formdata.name"></el-input>
        </el-form-item>
        <el-form-item label="团队创建者" prop="region">
          <el-avatar :size="48" :src="circleUrl" @click="dialogVisible2 = true"></el-avatar>
          <br />
          <span>{{ formdata.user ? formdata.user.name : "" }}</span>
        </el-form-item>
        <el-form-item label="团队公告">
          <el-input type="textarea" :rows="4" v-model="formdata.info"></el-input>
        </el-form-item>
        <el-form-item label="其他信息" prop="type">
          <el-input v-model="formdata.description"></el-input>
        </el-form-item>
        <el-form-item label="团队等级" prop="grade">
          <el-select v-model="formdata.grade">
            <el-option label="免费客户（Level 0）" :value="0"></el-option>
            <el-option label="黄金客户（Level 1）" :value="1"></el-option>
            <el-option label="铂金客户（Level 2）" :value="2"></el-option>
            <el-option label="钻石客户（Level 3）" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否官方创建" prop="isadmin">
          <el-select v-model="formdata.isadmin">
            <el-option label="是" :value="false"></el-option>
            <el-option label="否" :value="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示非学员排行" prop="type">
          <el-select v-model="formdata.isranking">
            <el-option label="显示" :value="false"></el-option>
            <el-option label="不显示" :value="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否管理员显示测评记录" prop="type">
          <el-select v-model="formdata.isadminshowquestion">
            <el-option label="不显示" :value="false"></el-option>
            <el-option label="显示" :value="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否管理员显示比赛记录" prop="type">
          <el-select v-model="formdata.isadminshowactivity">
            <el-option label="不显示" :value="false"></el-option>
            <el-option label="显示" :value="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设置主题色" prop="type">
          <el-select v-model="formdata.color">
            <el-option label="橙色" value="-cheng"></el-option>
            <el-option label="红色" value="red"></el-option>
            <el-option label="绿色" value="green"></el-option>
            <el-option label="蓝色" value="blue"></el-option>
            <el-option label="黄色" value="yellow"></el-option>
            <el-option label="紫色" value="purple"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传logo" prop="type">
          <el-upload action="/" :show-file-list="false" accept=".png,.svg,.jpg" :http-request="request">
            <img v-if="formdata.icon" :src="formdata.icon" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>&nbsp;
        </el-form-item>
      </el-form>
      <el-dialog width="950px" v-model="dialogVisible2">
        <User v-bind="{ userhandleCurrentChange, tablekey }"></User>
      </el-dialog>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import { computed, reactive, ref, toRefs, watch } from "vue";
import { asyncadmincreatorupdateteam } from "../../../api";
import study from "../../../mysql_interface/studycodemodel";
import updateoss from "../../../util/updateoss";
import User from "../User/index.vue";

const p = defineProps<{ ID?: number | string, team: study.Iteam, closed: () => void, create: () => void }>()

const formdata = reactive<study.Iteam>(p.team);
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const title = computed(() => {
  if (p.ID) {
    return "修改";
  }
  return "创建";
});

function userhandleCurrentChange(data: study.Iuser) {
  Object.assign(userinfo, toRefs(data));
  dialogVisible2.value = false;
}
const username = ref();

const userinfo = reactive<study.Iuser>({});
const circleUrl = computed(() => {
  console.log(formdata);
  if (formdata.user) return formdata.user.headportrait;
  return "";
});

watch(
  () => userinfo.ID,
  () => {
    formdata.userid = userinfo.ID;
    Object.assign(formdata, {
      user: {
        headportrait: userinfo.headportrait,
        name: userinfo.name,
      },
    });
  }
);

watch(
  () => p.ID,
  () => {
    if (typeof p.ID === "number") {
      Object.assign(formdata, toRefs(p.team));
      dialogVisible.value = true;
    }
  }
);

async function submit() {
  try {
    await asyncadmincreatorupdateteam(formdata);
    ElMessage.success(title.value + "成功");
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}
async function create1() {
  p.create();
  dialogVisible.value = true;
}

const tablekey: Array<keyof study.Iuser> = ["name", "ID"];

async function request(file: { file: File }) {
  const { name } = await updateoss([file.file]);
  formdata.icon = `https://cdn.hterobot.com/${name}`;
}

</script>


<style scoped>
.avatar {
  height: 64px;
  min-width: 64px;
}

.avatar-uploader-icon {
  height: 64px;
  min-width: 64px;
  font-size: 64px;
  border: 1px solid #000;
}
</style>